/**
 * create by cyw 2020-5-25
 * 底部栏组件页面
 */
import "./BottomBar.scss";
import React from "react";
import { connect } from "react-redux";

import { NavLink, withRouter } from "react-router-dom";

class BottomBar extends React.Component {
  constructor(props) {
    super(props);
  }
  //tab点击事件
  changeTab(item) {
    // console.log('diji', item)
    // this.props.dispatch(
    //   changeTab({
    //     activeKey: item.key,
    //   })
    // );
    this.props.history.replace(item.key);
  }

  //渲染tab
  renderItems() {
    // console.log(this.props)
    let tabs = this.props.tabs;
    return tabs.map((item, index) => {
      let cls = item.key + " btn-item";
      let name = item.name;

      // if (item.key === this.props.activeKey) {
      //   cls += " active";
      // }
      return (
        <div key={index} className={cls}>
          <NavLink
            to={"/" + item.key}
            activeClassName="selected"
            onClick={() => this.changeTab(item)}
          >
            <div className="tab-icon"></div>
            <div className="btn-name">{name}</div>
          </NavLink>
        </div>
      );
    });
  }

  render() {
    return <div className="bottom-bar">{this.renderItems()}</div>;
  }
}
export default withRouter(
  connect((state) => ({
    tabs: state.tabReducer.tabs,
    activeKey: state.tabReducer.activeKey,
  }))(BottomBar)
);
